<template>
	<view class="user-order">
		<tabs :active="active" @change="changeShow" :config="{itemWidth: 150}">
			<tab v-for="(item, index) in order" :key="index" :title="item.name" :name="item.type">
				<order-list v-if="item.isShow" :order-type="item.type" :ref="'order' + item.type"></order-list>
			</tab>
		</tabs>
		<float-tab></float-tab>
	</view>
</template>

<script>
	import {
		orderType
	} from '@/utils/type';

	export default {
		data() {
			return {
				active: orderType.ALL,
				order: [
					// {
					// 	name: '全部',
					// 	type: orderType.ALL,
					// 	isShow: false
					// },
					{
						name: '出餐中',
						type: orderType.PAID,
						isShow: false
					}, {
						name: '配送中',
						type: orderType.DURING_MEAL,
						isShow: false
					}, {
						name: '已送达',
						type: orderType.SHIPPING,
						isShow: false
					}, {
						name: '已完成',
						type: orderType.COMPLETED,
						isShow: false
					}, {
						name: '已退款',
						type: orderType.REFUNDED,
						isShow: false
					}
				]
			};
		},

		components: {},
		props: {},
		onLoad: function(options) {
			const {
				order
			} = this
			let type = options.type || orderType.ALL;
			let index = order.findIndex(item => item.type == type)
			this.changeShow(index);
		},
		onShow() {
			const {
				active,
				order
			} = this
			this.$refs['order' + order[active].type][0].reflesh()
		},
		onPullDownRefresh: function() {
			const {
				active,
				order
			} = this
			this.$refs['order' + order[active].type][0].reflesh()
		},

		onReachBottom: function() {
			const {
				active,
				order
			} = this
			this.$refs['order' + order[active].type][0].getOrderListFun()
		},
		methods: {
			changeShow(index) {
				if (index != -1) {
					this.active = index
					this.order[index].isShow = true
				}
			},
		}
	};
</script>
<style lang="scss" scoped>
	page {
		padding-bottom: 0;
	}
	.user-order {
		position: relative;
		padding-top: 20rpx;
		overflow: hidden;
		&::before,
		&::after {
			content: '';
			position: fixed;
			z-index: 11;
			top: 0;
			width: 100%;
			height: 20rpx;
			background-color: #FFCC46;
		}

		&::after {
			background-color: #fff;
			border-radius: 40rpx 40rpx 0 0;
		}
	}
</style>
